<template>
  <div>
    <h1 style="font-size: 20px; padding:1%"> 馆藏图书管理 </h1>
    <div class="tabs">
      <el-table :data="tableData.filter(data => !search || data.BOOK_NAME.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%;" height="440">
        <el-table-column label="书名" prop="BOOK_NAME"></el-table-column>
        <el-table-column label="ISBN" prop="ISBN"></el-table-column>
        <el-table-column label="馆藏编号" prop="BOOK_ID"></el-table-column>
        <el-table-column label="图书状态" prop="STATE">
          <template #default="scope">
            <el-tag disable-transitions :type="Type(scope.row.STATE)">
              {{ scope.row.STATE }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="right">
          <template #header>
            <el-input v-model="search" size="mini" placeholder="输入书名关键字搜索" />
          </template>
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">信息修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div align="right" style="padding:1%">
        <el-button type="primary" @click="handleNew">新增图书
        </el-button>
      </div>

      <!-- 嵌套表单（新增图书） -->
      <el-dialog v-model="dialogFormVisible" title="新增图书" width="40%">
        <el-form :model="form" :local-position="labelPosition" :label-position="labelPosition" label-width="120px">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="form.bookname" autocomplete="off" />
          </el-form-item>
          <el-form-item label="作者" :label-width="formLabelWidth">
            <el-input v-model="form.author" autocomplete="off" />
          </el-form-item>
          <el-form-item label="翻译" :label-width="formLabelWidth">
            <el-input v-model="form.translater" autocomplete="off" />
          </el-form-item>
          <el-form-item label="代表句" :label-width="formLabelWidth">
            <el-input v-model="form.repre" autocomplete="off" />
          </el-form-item>
          <el-form-item label="出版商" :label-width="formLabelWidth">
            <el-input v-model="form.publisher" autocomplete="off" />
          </el-form-item>
          <el-form-item label="isbn" :label-width="formLabelWidth">
            <el-input v-model="form.isbn" autocomplete="off" />
          </el-form-item>
          <el-form-item label="内容简介" :label-width="formLabelWidth">
            <el-input v-model="form.booktext" :rows="3" type="textarea" />
          </el-form-item>
          <el-form-item label="作者简介" :label-width="formLabelWidth">
            <el-input v-model="form.authorabout" :rows="3" type="textarea" />
          </el-form-item>
          <el-form-item label="书本图片链接" :label-width="formLabelWidth">
            <el-input v-model="form.book_img" autocomplete="off" />
          </el-form-item>
          <el-form-item label="作者图片链接" :label-width="formLabelWidth">
            <el-input v-model="form.author_img" autocomplete="off" />
          </el-form-item>

          <el-form-item label="馆藏地址" :label-width="formLabelWidth">
            <el-radio-group v-model="form.place">
              <el-radio label="四平路校区"></el-radio>
              <el-radio label="嘉定校区"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <p>
              <el-icon>
                <InfoFilled />
              </el-icon> 补充：中文书籍翻译填 Chinese 汉语 即可
            </p>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="Commit">确认新增</el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 嵌套表单（修改图书信息） -->
      <el-dialog v-model="dialogMulVisible" title="修改图书信息" width="40%">
        <el-form :model="Mulform" :local-position="labelPosition" :label-position="labelPosition" label-width="120px">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <p>{{Mulform.bookname}}</p>
          </el-form-item>
          <el-form-item label="作者" :label-width="formLabelWidth">
            <el-input v-model="Mulform.author" autocomplete="off" />
          </el-form-item>
          <el-form-item label="翻译(默认中文)" :label-width="formLabelWidth">
            <el-input v-model="Mulform.translater" autocomplete="off" />
          </el-form-item>
          <el-form-item label="代表句" :label-width="formLabelWidth">
            <el-input v-model="Mulform.repre" autocomplete="off" />
          </el-form-item>
          <el-form-item label="出版商" :label-width="formLabelWidth">
            <el-input v-model="Mulform.publisher" autocomplete="off" />
          </el-form-item>
          <el-form-item label="isbn" :label-width="formLabelWidth">
            <p>{{Mulform.isbn}}</p>
          </el-form-item>
          <el-form-item label="内容简介" :label-width="formLabelWidth">
            <el-input v-model="Mulform.booktext" :rows="3" type="textarea" />
          </el-form-item>
          <el-form-item label="作者简介" :label-width="formLabelWidth">
            <el-input v-model="Mulform.authorabout" :rows="3" type="textarea" />
          </el-form-item>
          <el-form-item label="书本图片链接" :label-width="formLabelWidth">
            <el-input v-model="Mulform.book_img" autocomplete="off" />
          </el-form-item>
          <el-form-item label="作者图片链接" :label-width="formLabelWidth">
            <el-input v-model="Mulform.author_img" autocomplete="off" />
          </el-form-item>

          <el-form-item label="馆藏地址" :label-width="formLabelWidth">
            <el-radio-group v-model="Mulform.place">
              <el-radio label="四平路校区"></el-radio>
              <el-radio label="嘉定校区"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogMulVisible = false">取消</el-button>
            <el-button type="primary" @click="MulCommit">确认新增</el-button>
          </span>
        </template>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { h } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  inject: ['reload'],
  data() {
    return {
      tableData: [],
      search: '',
      dialogFormVisible: false,
      dialogMulVisible: false,
      labelPosition: 'right',
      form: {
        bookname: '',
        author: '',
        translater: '',
        repre: '',
        publisher: '',
        booknumber:'1',
        isbn: '',
        booktext: '',
        authorabout: '',
        book_img: '',
        author_img: '',
        place: ''
      },
      Mulform: {
        bookname: '',
        author: '',
        translater: '',
        repre: '',
        publisher: '',
        isbn: '',
        booktext: '',
        authorabout: '',
        book_img: '',
        author_img: '',
        place: ''
      },
    }
  },
  methods: {
    handleEdit(row) {
      console.log(row);
        axios({
            method: 'get',
            params: {
                isbn: row.ISBN,
            },
            url: '/api/BookInfo/GetBookInfo',
        }).then((res) => {
            console.log('111', res)
            this.Mulform.author_img = res.data[0].AUTHOR_IMG;
            this.Mulform.author=res.data[0].BOOK_AUTHOR;
            this.Mulform.book_img=res.data[0].BOOK_IMG;
            this.Mulform.bookname=res.data[0].BOOK_NAME;
            this.Mulform.publisher=res.data[0].BOOK_PUBLISHER;
            this.Mulform.repre=res.data[0].BOOK_REPRE;
            this.Mulform.booktext=res.data[0].BOOK_TEXT;
            this.Mulform.translater=res.data[0].BOOK_TRANSLATER;
            this.Mulform.isbn=res.data[0].ISBN;
            this.Mulform.authorabout=res.data[0].BOOK_AUTHORABOUT;
            this.Mulform.place=res.data[0].PLACE;
            this.dialogMulVisible = true;

        }, error => {
            console.log('错误', error.message)
        })
    },
    handleNew() {
      this.dialogFormVisible = true;
    },
    Commit() {
      console.log(this.form);
      // 返回id
      axios({
        method: 'post',
        params: {
          bookname: this.form.bookname,
          author: this.form.author,
          translater: this.form.translater,
          repre: this.form.repre,
          publisher: this.form.publisher,
          isbn: this.form.isbn,
          booknumber:this.form.booknumber,
          booktext: this.form.booktext,
          authorabout: this.form.authorabout,
          book_img: this.form.book_img,
          author_img: this.form.author_img,
          place: this.form.place
        },
        url: '/api/BookInfo/INSERTBOOKINFO',
      }).then((res) => {
        console.log('edit', res)
        if (res.data == true) {
          this.$message({
            message: '新增图书成功',
            type: 'success'
          });
        }
        else {
          this.$message({
            message: '新增图书失败'
          });
        }
      }, error => {
        console.log('错误', error.message)
      })
      this.reload();

      this.dialogFormVisible = false;
    },

    MulCommit() {
      console.log(this.form);
      // 返回id
      axios({
        method: 'post',
        params: {
          author: this.Mulform.author,
          translater: this.Mulform.translater,
          repre: this.Mulform.repre,
          publisher: this.Mulform.publisher,
          isbn:this.Mulform.isbn,
          booknumber:'1',
          booktext: this.Mulform.booktext,
          authorabout: this.Mulform.authorabout,
          book_img: this.Mulform.book_img,
          author_img: this.Mulform.author_img,
          place: this.Mulform.place
        },
        url: '/api/BookInfo/UpdateBookInfo',
      }).then((res) => {
        console.log('edit', res)
        if (res.data == true) {
          this.$message({
            message: '修改图书信息成功',
            type: 'success'
          });
        }
        else {
          this.$message({
            message: '修改图书信息失败'
          });
        }
      }, error => {
        console.log('错误', error.message)
      })
      this.reload();

      this.dialogFormVisible = false;
    },

    Type(modeId) {
      if (modeId === '已归还') {
        return "success"
      }
      else if (modeId === '已借出') {
        return ""
      }
      else {
        return "danger"
      }
    },
  },
  mounted() {
    axios.get('/api/Admin/GetBooks').then((res) => {
      console.log('book:', res)
      this.$data.tableData = res.data
    })
  },
}

</script>

<style lang="less" scoped>
.tabs {
  height: 99%;
  width: 99%;
  padding: 3%;
  background-color: white;
}

.el-input {
  width: 350px;
}
</style>